<template>
  <div>
    <div class="docker">
      <div div="container">
        <!-- nav -->
        <div class="nav">
          <a style="color:#DE4323;margin-left: 150px;"><router-link to="/login">亲，请登录</router-link></a>
          <a class="div"><router-link to="/register">免费注册</router-link></a>
          <a class="div"></a>
          <a class="div"></a>
          <a style="margin-left: 400px;"></a>
          <a class="push"></a>
          <a class="push">
            <router-link to="/">科购首页</router-link>
          </a>
          <a class="push"><img src="../assets/car.png">&nbsp购物车</a>
          <a class="push">订单详情</a>
          <a class="push">充值页面</a>
          <a class="push">
            <router-link to="/feedback">用户反馈</router-link>
          </a>
          <a class="push"></a>
        </div>
        <!-- main -->
        <div class="main">
          <div class="logo">
            <h1>科购</h1>
            <p>KeGou</p>
          </div>
        </div>
        <div class="docker">
          <div class="container">
            <div class="row">
              <div class="col-4"></div>
              <div class="col-4 mt-3">
                <form action="" class="border was-validated pl-5 pr-5 pt-5"
                      style="width: 500px;border-radius: 20px;background: rgba(255, 255, 255, 0.9);">
                  <div class="form-row mb-0">
                    <h2><b>欢迎登录</b></h2>
                  </div>
                  <!--文本输入框-->
                  <div class="form-group">
                    <input type="email" class="form-control" v-model="user"
                           placeholder="请输入你的邮箱"/>
                  </div>
                  <!--密码框-->
                  <div class="form-group">
                    <!-- <i class="bi bi-person"></i>-->
                    <input type="password" class="form-control" v-model="pass"
                           placeholder="请输入你的密码"/>
                  </div>
                  <!--提交按钮-->
                  <button type="button" class="btn btn-primary" id="csx" style="width: 438px;height: 50px"
                          @click="UserLogin">登&nbsp;&nbsp;&nbsp;录
                  </button>
                  <p></p>
                  <div class="form-row mb-4 text-center">
                    <router-link to="/findUser"><h6 class="h"> 已有账号,忘记密码?</h6></router-link>
                  </div>
                  <div class="dsfdr">

                    <table border="0" width="100%">
                      <tr>
                        <td style="border-bottom: 2px solid #9fa0a0;width:150px"></td>
                        <td rowspan="2" class="text-center">其他方式登录</td>
                        <td style="border-bottom: 2px solid #9ea09c;width:150px"></td>
                      </tr>
                      <tr>
                        <td></td>
                        <td></td>
                      </tr>
                    </table>
                  </div>
                  <div class="row align-items-start align-content-end">

                    <!--                    gitee快捷登陆-->

                    <div class="col-6 text-center" type=""><a
                      href="https://gitee.com/oauth/authorize?client_id=3fb3d847acaa9bdb214ad6eb1435661136b92f43e1924bcce743a04b6d6a9b2f&redirect_uri=http://127.0.0.1:8081/oauth/gitee&response_type=code">
                      <img
                        src="../assets/gitee.svg"
                        style="width: 40px"></a></div>

                    <!--                    github快捷登陆-->

                    <div class="col-6 text-center"><a
                      href="https://github.com/login/oauth/authorize?client_id=8fa79c723e208011c3ea&redirect_uri=http://localhost:8081/oauth/github"><img
                      src="../assets/github.svg"
                      style="width: 44px"></a></div>

                  </div>

                </form>
              </div>
            </div>
          </div>
        </div>
        <div class="footer">
          <p>反馈建议 | 官方空间 | 空间活动 | 空间应用 | ABCmouse腾讯版 | 腾讯原创馆 | QQ互联 | QQ登录 | 社交组件 | 应用侵权投诉 | Complaint Guidelines</p>
          <p>Copyright 2005 - 2022 Tencent.All Rights Reserved.</p>
          <p><a href="https://beian.miit.gov.cn">湘ICP备2022018153号-1</a></p>
        </div>
      </div>
    </div>
    s
  </div>
</template>

<script>
export default {
  name: "login",
  data() {
    return {
      user: '',
      pass: ''
    }
  },
  methods: {
    UserLogin() {
      if (this.user.length == 0 || this.pass.length == 0) { //代表用户没有输入任何值
        this.$notify.info({
          title: '系统信息',
          message: "请输入密码和邮箱"
        })
      } else {
        const form_data = new FormData()
        form_data.append("username", this.user)
        form_data.append("password", this.pass)
        this.$http.post("/user/login", form_data).then((rep) => {
          if (rep.data.code == 200) { // 用户登陆成功
            this.$auth.setFrontAuth(rep.data.token, rep.data.username) //设置token
            this.$router.push("/")
          } else { //账号或密码错误
            this.$notify.info({
              title: '系统信息',
              message: rep.data.msg
            })
          }
        }).catch((rep) => {
          console.log(rep)
        })
      }
    }
  }
}
</script>

<style scoped>
#container {
  text-align: center;
  float: none;
}

#mynav {
  display: inline-block;
}

body {
  height: 100%;
  background: no-repeat center fixed;
  background-size: 100% 100%;
}

col img {
  background-size: 30px 40px;
}

.h {
  color: #d1ab25;
  text-align: center;
}

.nav {
  border: 1px solid #F5F5F5;
  width: 100%;
  font-size: 10px;
  background-color: #F5F5F5;
}

.nav a {
  margin-top: 5px;
  margin-bottom: 5px;
  cursor: pointer;
}

.nav .div {
  margin-left: 30px;
  color: #8D8D8D;
}

.nav .push {
  margin-left: 30px;
  color: #8D8D8D;
}

.nav .push img {
  width: 15px;
  margin-left: 10px;
}

.logo {
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  margin-left: 150px;
  margin-top: 40px;
  color: #EB5E2A;
}

.logo p {
  font-size: 20px;
  margin-top: -10px;
  margin-left: 9px;
}

.logo h5 {
  color: #171A1D;
  margin-top: -80px;
  margin-left: 85px;
}

.button input {
  border-style: none;
  background-color: transparent;
  color: #EB5E2A;

}

.button {
  margin-top: -34px;
  margin-left: 260px;
}

.register {
  margin-top: 200px;
  margin-left: 600px;

}

.Email input {
  height: 30px;
  width: 300px;
  border: 1px solid #ADB5BD;
}

.captcha input {
  height: 30px;
  width: 300px;
  border: 1px solid #ADB5BD;
}

.password input {
  margin-top: 20px;
  height: 30px;
  width: 300px;
  border: 1px solid #ADB5BD;
}

.th button {
  margin-top: 40px;
  margin-left: 650px;
  width: 300px;
  background: linear-gradient(to right, #F9CF9B, #F5B095);
  border: #EB5E2A;

}

.cb {
  margin-top: 25px;
  margin-left: 650px;
  font-size: 10px;

}

.cb input {
  vertical-align: sub;

}


.footer {
  margin-top: 60px;
  border: 1px solid #fff;
  text-align: center;
  font-size: 10px;
  background-color: #fff;
  padding-top: 10px;
  padding-bottom: 10px;
}

.footer p {
  margin-bottom: 0px;
}

.footer .p1 {
  border: 1px solid #fff;
  letter-spacing: 2px;
  margin-left: 4px;
}

.footer .p2 {
  letter-spacing: 2px;
  margin-left: -320px;
  margin-top: 5px;
}

.footer .p3 {
  letter-spacing: 2px;
  margin-right: 110px;
  margin-top: 5px;
}

.sign {
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  margin-left: 150px;
  margin-top: 8px;
  color: #EB5E2A
}

.log h1 {
  font-size: 55px;
}

.log p {
  font-size: 3px;
  letter-spacing: 2px;
}

.btn csx {
  font-size: 30px;
}
</style>
